const tbody = document.querySelector('tbody');

// 数据渲染页面
function getStudentList() {
    console.log(1);
    axios.get('/student/list').then(e => {
        if (e.data.code === 0) {
            const arr = e.data.data;
            // console.log(arr);
            const html = arr.reduce((h, v) =>
                h + `
            <tr>
            <th scope="row">${v.id}</th>
            <td>${v.name}</td>
            <td>${v.age}</td>
            <td>${v.sex}</td>
            <td>${v.group}</td>
            <td>${v.phone}</td>
            <td>${v.salary}</td>
            <td>${v.truesalary}</td>
            <td>${v.province+v.city+v.county}</td>
            <td>
                <button type="button" data-id="${v.id}" class="btn btn-primary btn-sm update-show-modal">修改</button>
                <button type="button" data-id="${v.id}" class="btn btn-danger btn-sm delete-btn">删除</button>
            </td>
        </tr>
        `, '')
            tbody.innerHTML = html;
        }
    })
}
// 封装下拉列表
function renderSelect(url, params, dom, label, value = '') {
    axios.get(url, {
        params,
    }).then(e => {
        // console.log(e.data);
        dom.innerHTML = e.data.reduce((h, v) => h + `<option  value="${v}">${v}</option>`,
            `<option selected value="">--${label}--</option>`
        );
        dom.value = value;
    });

}
// 初始化新增表单的 下拉列表
function initSelect(selector) {
    const provinceSelect = document.querySelector(`${selector} [name="province"]`); //拿到input标签
    const citySelect = document.querySelector(`${selector} [name="city"]`);
    const countySelect = document.querySelector(`${selector} [name="county"]`);

    // 获取下拉列表省数据
    // axios.get('/geo/province').then(e => {
    //     console.log(e);
    //     const list = e.data;
    //     provinceSelect.innerHTML = list.reduce((h, v) => h+`<option  value="${v}">${v}</option>`,
    //     '<option selected value="">--省--</option>'
    //     );
    // });

    renderSelect('/geo/province', {}, provinceSelect, '省')

    // 获取下拉列表市数据
    provinceSelect.addEventListener('change', function () {
        renderSelect('/geo/city', {
            pname: provinceSelect.value,
        }, citySelect, '市')
    });

    // 获取下拉列表县/区数据
    citySelect.addEventListener('change', function (e) {
        renderSelect('/geo/county', {
            pname: provinceSelect.value,
            cname: citySelect.value
        }, countySelect, '县/区')

    });
}

// 数据渲染页面
getStudentList()
// 初始化新增表单的 下拉列表
initSelect('#addModal')

// 初始化更修新表单的 下拉列表
initSelect('#updateModal')

// 新增表单
const addForm = document.querySelector('#addModal form'); // 新增表单
addForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const data = $(addForm).serialize();
    axios.post('/student/add', data).then(e => {
        if (e.data.code === 0) {
            toastr.success(e.data.message);
            addForm.reset();
            $('#addModal').modal('hide');
            getStudentList();
        }
    })
});

//修改表单
tbody.addEventListener('click', function (e) {
    const dom = e.target;
    if (dom.classList.contains('update-show-modal')) {
        $('#updateModal').modal('show');
        //获取数据
        const id = dom.dataset.id;
        // console.log(id);
        axios.get('/student/one', {
            params: {
                id
            }
        }).then(e => {
            // console.log(3);
            const obj = e.data.data;
            // console.log(obj);
            for (const key in obj) {
                const target = document.querySelector(`#updateModal [name=${key}]`)
                // console.log(target);

                if (key === 'sex') {
                    document.querySelector(`#updateModal [name=sex][value="${obj.sex}"]`).checked = true;
                    continue //跳过下面的函数
                }
                if (target) {
                    target.value = obj[key];
                }


            }
            // 根据省信息 获取市表单
            renderSelect('/geo/city', {
                pname: obj.province,
            }, document.querySelector('#updateModal [name=city]'), '市', obj.city);

            // 根据省市获取区
            renderSelect('/geo/county', {
                pname: obj.province,
                cname: obj.city,
            }, document.querySelector('#updateModal [name=county]'), '县/区', obj.county);
        })
    } else if (dom.classList.contains('delete-btn')) {
        if (confirm('确定删除?')) {
            const id = dom.dataset.id;
            axios.delete('/student/delete', {
                params: {
                    id
                }
            }).then(e => {
                if (e.data.code === 0) {
                    toastr.success('删除成功');
                    getStudentList()
                }
            })
        }
    }
})

const updateForm = document.querySelector('#updateModal form');
updateForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const data = $(updateForm).serialize();
    axios.put('/student/update', data).then(e => {
        if (e.data.code === 0) {
            toastr.success(e.data.message);
            $('#updateModal').modal('hide')
            // updateForm.reset()
            getStudentList();
        }
    })
})
